<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="位置" prop="area">
        <el-select v-model="queryParams.area"  >
          <el-option
            v-for="item in optionsArea"
            :key="item.id"
            :label="item.areaName"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item  prop="area">
        <el-select v-model="queryParams.id"  >
          <el-option
            v-for="item in videoList"
            :key="item.id"
            :label="item.videoName"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>


    <el-descriptions class="margin-top"  :column="3"  border>
      <el-descriptions-item  >
        花卉大棚
        <div class="app-container" v-for="(item, i) in videoInfo" :key="`info-${i}`">
          <RtmpLive :src="item.videoSrc"></RtmpLive>

        </div>
      </el-descriptions-item>

    </el-descriptions>


  </div>
</template>

<script>
import { listVideo, getVideo, delVideo, addVideo, updateVideo } from "@/api/iot/video";
import { listAreaAll} from "@/api/iot/area";
import 'video.js/dist/video-js.css'

import RtmpLive from "@/views/iot/video/RtmpLive.vue";

import 'videojs-flash'

// import SWF_URL from 'videojs-swf/dist/video-js.swf'



export default {
  name: "Equipment",
  components: { RtmpLive },
  data() {
    return {
      videoInfo: [
        { title: '香港卫视', videoSrc: 'rtmp://192.168.0.69:1935/live/v14'},
        { title: '香港财经', videoSrc: 'rtmp://202.69.69.180:443/webcast/bshdlive-pc'},
        { title: '湖南卫视', videoSrc: 'rtmp://58.200.131.2:1935/livetv/hunantv'},
        { title: '美国中文电视', videoSrc: 'rtmp://media3.sinovision.net:1935/live/livestream'}
      ],
      // 遮罩层
      loading: true,
      eData:[],
      mqttData:[],
      // 农情视频监控表格数据
      videoList: [],
      optionsArea:[],
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 设备管理表格数据
      equipmentList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        videoName: null,
        videoUrl: null,
        area: null
      },
      videoOptions: {

        live: true,

        autoplay: true,

        fluid: true,
        muted: true, // 默认情况下将会消除任何音频。 //**关键问题** ios开启静音才能自动播放
        notSupportedMessage: '暂时无法播放',
        aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        controlBar: {

          timeDivider: true,

          durationDisplay: true,

          remainingTimeDisplay: false,

          fullscreenToggle: true // 全屏按钮

        },

        techOrder: ['flash'],

        flash: {

          hls: { withCredentials: false },

          swf: 'static/video-js.swf' // 引入静态文件swf

        },

        sources: [{ // 流配置，数组形式，会根据兼容顺序自动切换

          type: 'rtmp/flv',

          src: 'rtmp://58.200.131.2:1935/livetv/hunantv' // 这是芒果TV现场直播视频，地址是可以用的，最后需要替换成后端给的项目地址

        }]

      }



    };
  },
  created() {
    this.getListArea();
    this.getList();
  },
  mounted () {
    this.$nextTick(() => {
      this.$refs.videoPlayer.player

    });
  },
  destroyed () {

    this.$refs.videoPlayer.dispose

  },
  methods: {
    //播放
    onPlayerPlay(m) {
      console.log(m)
      this.$refs.videoPlayer.player.play();
    },
    //暂停
    onPlayerPause(player, index) {},
    //注销vue-video-player组件
    remove() {
      this.$destroy("VueVideoPlayer");
    },
    /** 查询农情视频监控列表 */
    getList() {
      this.loading = true;
      listVideo(this.queryParams).then(response => {
        this.videoList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 查询区域列表 */
    getListArea() {
      this.loading = true;
      listAreaAll(this.queryParams).then(response => {
        this.optionsArea = response.rows;
        this.loading = false;

      });
    },

    /** 搜索按钮操作 */
    handleQuery() {
      // this.queryParams.pageNum = 1;
      // this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    }



  }
};
</script>
<style >
  .el-row {
    margin-bottom: 20px;
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 40px;
    margin-bottom: 20px;
    border-radius: 20px;
    font-size: 15px;
    text-align: center;
    line-height: 40px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>
